<template>
  <div>父组件
    <!-- 父子组件通信 父组件传递属性(传递的属性可以自定义) 子组件props接收
        子传父  子组件发布自定义事件
        v-model  :value+@input
    -->
    <!-- <jerry :money="money" @cutMoney="cutMoney" /> -->
    <!-- <jerry :value="money" @input="cutMoney" /> -->
    <!-- <jerry v-model="money" /> -->

    <!-- 在组件上使用v-model 前提是子组件接收的属性必须是 value, 发布的自定义事件必须是input -->

    <!-- .sync 修饰符是来简化父子组件通信的
      1. 父传子  :属性名.sync="传递的属性"
      2. 子组件正常接收
      3. 子组件想要修改父组件的数据 发布的自定义事件 update:属性名  自动将子组件的值传递给父组件
     -->
    <jerry :money.sync="money" :car.sync="car" />
  </div>
</template>

<script>
import Jerry from './Jerry.vue'
export default {
  components: { Jerry },
  data() {
    return {
      money: 100,
      car: '老爷车'
    }
  },
  methods: {
    cutMoney(count) {
      this.money -= count
    }
  }

}
</script>

<style>

</style>
